<template>
  <div class="error">
    <div class="t-flex">
      <img class="windy-x" :src="imgUrl" />
      <div class="right-text">
        <h1 class="light-speed-in">{{ textView.title }}</h1>
        <h2 class="light-speed-in">{{ textView.subtitle }}</h2>
        <p class="light-speed-in">{{ textView.describe }}</p>
        <el-button class="light-speed-in" type="primary" @click="toPage">{{
          text
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 404,
    },
  },
  computed: {
    imgUrl() {
      return require("../../../assets/images/error/" + this.type + ".png");
    },
    textView() {
      return this.textData[this.type];
    },
  },
  data() {
    return {
      timer: null,
      text: "返回首页",
      textData: {
        404: {
          title: "抱歉!",
          subtitle: "页面不存在！",
          describe: "请检查您输入的网址是否正确，或点击下面的按钮返回首页。",
        },
        403: {
          title: "抱歉!",
          subtitle: "暂无操作权限！",
          describe: "请联系管理员分配操作权限！",
        },
        500: {
          title: "糟糕!",
          subtitle: "服务器错误！",
          describe: "请联系管理员处理！",
        },
      },
    };
  },
  mounted() {},
  methods: {
    toPage() {
      this.$router.push({ name: "home" });
      // this.$store.dispatch('deleteCurrentPageTag')
    },
    start() {
      let t = 5;
      this.text = t + "s 返回首页";
      this.timer = setInterval(() => {
        t--;
        this.text = t + "s 返回首页";
        if (t == 0) {
          clearInterval(this.timer);
          this.timer = null;
          this.text = "返回首页";
          this.toPage();
        }
      }, 1000);
    },
  },
  activated() {
    clearInterval(this.timer);
    this.timer = null;
    // this.start();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
.error {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 300px;
  }
  .right-text {
    margin-left: 30px;
    h1 {
      font-size: 30px;
      font-weight: bold;
      color: $type-warning;
      margin-bottom: 30px;
    }
    h2 {
      color: $type-warning-disabled;
      font-size: 20px;
      margin-bottom: 10px;
    }
    p {
      color: $tips-color;
      font-size: 14px;
      margin: 20px 0;
    }
  }
  .windy-x {
    animation: windyX 1000ms both;
  }
  @keyframes windyX {
    from {
      transform-origin: 50% 0;
      transform: rotate(0deg);
    }

    25% {
      transform-origin: 50% 0;
      transform: rotate(-45deg);
    }

    62% {
      transform-origin: 50% 0;
      transform: rotate(30deg);
    }

    83% {
      transform-origin: 50% 0;
      transform: rotate(-15deg);
    }

    95% {
      transform-origin: 50% 0;
      transform: rotate(5deg);
    }

    to {
      transform-origin: 50% 0;
      transform: rotate(0deg);
    }
  }
  .light-speed-in {
    animation: lightSpeedIn 1000ms both;
  }
  @keyframes lightSpeedIn {
    from {
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }

    60% {
      transform: skewX(20deg);
      opacity: 1;
    }

    80% {
      transform: skewX(-5deg);
      opacity: 1;
    }

    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
}
</style>